<template>
	<div id="app">
		<el-button @click="handleAddDrug" style="background-color: #666ee8;color: white;margin-right: -1000px;"><i class="el-icon-circle-plus">新增药品</i></el-button>
		<hr />
		<!--=================================== 查询 =================================== -->
		<el-form :inline="true" :model="searchForm" class="demo-form-inline" style="width: 1350px;">
			<el-form-item label="处方类别" style="margin-right: 50px;">
				<el-select v-model="searchForm.drugtypeId" placeholder="请选择" style="width: 150px;">
					<el-option label="全部" value=""></el-option>
					<el-option v-for="drugtype in drugtypeList" :key="drugtype.id" :label="drugtype.name" :value="drugtype.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="药品状态" style="margin-right: 50px;">
				<el-select v-model="searchForm.drugstatusId" placeholder="请选择" style="width: 150px;">
					<el-option label="全部" value=""></el-option>
					<el-option v-for="drugstatus in drugstatusList" :key="drugstatus.id" :label="drugstatus.name" :value="drugstatus.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间" style="margin-right: 50px;">
				<el-date-picker v-model="searchForm.createTime" type="daterange" range-separator="-" start-placeholder="开始日期"
				 end-placeholder="结束日期" style="width: 250px;">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-input v-model="searchForm.searchName" placeholder="输入药品名称/编码/生产厂家" style="width: 300px;"></el-input>
			</el-form-item>
			<el-form-item style="margin-right: 60px;">
				<el-button style="background-color: #666ee8;margin-left: -10px;color: white;" @click="handleSearch"><i class="el-icon-search"></i></el-button>
			</el-form-item>
		</el-form>
		<!--=================================== 列表 =================================== -->
		<el-table :data="tableData" style="width: 100%;" :header-cell-style="{background:'#c2c5f6',color:'black'}">
			<el-table-column type="index" :index="indexMethod" label="序号" width="50px">
			</el-table-column>
			<el-table-column prop="drugnumber" label="编码" style="color: mediumpurple;">
			</el-table-column>
			<el-table-column prop="name" label="药品名称" width="140px">
			</el-table-column>
			<el-table-column prop="specification" label="规格">
			</el-table-column>
			<el-table-column prop="drugtypename" label="收费类别">
			</el-table-column>
			<el-table-column prop="inprice" label="采购价(/元)">
			</el-table-column>
			<el-table-column prop="outprice" label="售药价(/元)">
			</el-table-column>
			<el-table-column prop="venderName" label="生产厂家" width="200px">
			</el-table-column>
			<el-table-column prop="drugstatus" label="状态">
			</el-table-column>
			<el-table-column prop="createtime" label="创建时间" width="200px">
			</el-table-column>
			<el-table-column label="操作" width="120px">
				<template v-slot="scope">
					<el-link type="primary" :underline="false" @click="handleUpd(scope.row)" style="margin-right: 30px;color: #666ee8;">编辑</el-link>
					<el-link type="primary" :underline="false" @click="handleDrugstatus(scope.row)" style="color: #666ee8;">{{scope.row.drugstatus=='启用'?'停用':'启用'}}</el-link>
				</template>
			</el-table-column>
		</el-table>
		<!--=================================== 分页 =================================== -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
			 :page-sizes="sizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				drugtypeList: [],
				drugstatusList: [],
				searchForm: {
					drugtypeId: '',
					drugstatusId: ''
				},
				total: 0,
				current: 1,
				size: 10,
				sizes: [10, 20, 30],
				tableData: [],
			}
		},
		created() {
			this.initData();
			this.initDrugtypeList();
			this.initDrugstatusList();
		},
		methods: {
			handleAddDrug() {
				this.$router.replace({
					path: '/drug_addDrug'
				});
			},
			handleUpd(row) {
				this.$router.replace({
					path: '/drug_addDrug',
					query: {
						drugData: row,
						upd: 1
					}
				});
			},
			handleDrugstatus(row) {
				row.drugstatusId = row.drugstatusId == 1 ? 2 : 1;
				let drugstatus = row.drugstatusId == 1 ? '启用' : '停用';
				this.$confirm('确认要' + drugstatus + '此药品信息吗?', drugstatus + '确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post('http://localhost:9999/drug/drug/updDrug',row).then(res => {
						this.initData();
						this.$message({
							type: 'success',
							message: drugstatus + '成功!'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消' + drugstatus
					});
				});

			},
			handleSearch() {
				this.current = 1;
				this.initData();
			},
			initData() {
				this.axios.get('http://localhost:9999/drug/drug/list', {
					params: {
						current: this.current,
						size: this.size,
						drugtypeId: this.searchForm.drugtypeId,
						drugstatusId: this.searchForm.drugstatusId,
						searchName: this.searchForm.searchName,
						beginCreatetime: this.searchForm.createTime ? this.searchForm.createTime[0] : '',
						endCreatetime: this.searchForm.createTime ? this.searchForm.createTime[1] : ''
					}
				}).then(res => {
					/* console.log(res.data); */
					if (res.data) {
						this.tableData = res.data.obj.records;
						this.total = res.data.obj.total;
					}
				})
			},
			initDrugtypeList() {
				this.axios.get('http://localhost:9999/drug/drugtype/list').then(res => {
					/* console.log(res.data); */
					if (res.data) {
						this.drugtypeList = res.data.obj;
					}
				})
			},
			initDrugstatusList() {
				this.axios.get('http://localhost:9999/drug/drugstatus/list').then(res => {
					/* console.log(res.data); */
					if (res.data) {
						this.drugstatusList = res.data.obj;
					}
				})
			},
			indexMethod(index) {
				return index + 1;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val;
				this.initData();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val;
				this.initData();
			}
		}
	};
</script>
